<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>通知详情</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <style>
      .content {
        color: #686875;
      }
      
      .btns {
        text-align: center;
      }
      
      .btns .mui-btn {
        min-width: 120px;
        height: 40px;
        border-radius: 20px;
      }
      
      .head_top {
        padding: 30px 0;
        overflow: hidden;
      }
      
      .icon_img {
        float: left;
        width: 80px;
        height: 80px;
        background: url(./img/tongzhidan.png) no-repeat;
        background-size: 100%;
      }
      
      .txt_s {
        float: left;
        vertical-align: middle;
        height: 80px;
        line-height: 80px;
        padding-left: 20px;
        color: #3188FE;
      }
      
      .iscreate {
        height: 260px;
        background: #ECF3FB;
        border-radius: 10px;
        border: solid 1px #A5C3EC;
        padding: 15px;
      }
      
      .mui-popover-action {
        height: 100%;
      }
      
      .fr-div-w {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        padding: 15px;
        border-radius: 5px;
        background: #fff;
      }
      
      .mui-popover-arrow {
        display: none;
      }
      
      input {
        margin: 0 !important;
      }
      
      .text-label {
        margin-right: 5px;
        white-space: nowrap;
      }
    </style>
  </head>

  <body>
    <div class="page-wrap" id="container">
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left text-white"></a>
        <h1 class="mui-title">预计执行时间</h1>
      </header>
      <div class="mui-content bg-white page-scroll">
        <div v-cloak>
          <div style="margin-top: 20px;padding: 15px;">
            <div class="flex align-center margin-bottom-sm">
              <span class="text-label">开始时间</span><span><input readonly data-options="{}" v-model="startTime" @tap.stop="chooseTime($event)" type="text" placeholder="请选择预计开始时间"></span>
            </div>
            <div class="flex align-center margin-bottom-sm">
              <span class="text-label">结束时间</span><span><input readonly data-options="{}" v-model="endTime" @tap.stop="chooseTime1($event)" type="text" placeholder="请选择预计结束时间"></span>
            </div>
          </div>
        </div>
      </div>
      <div class="fixed-btn" id="btnShow">
        <button type="button" class="mui-btn mui-btn-primary" @click="submit">提交</button>
      </div>
      <div class="mui-popover" id="popover">
        <div class="fr-div-w">

        </div>
      </div>
    </div>

    <script src="../../../js/mui.min.js"></script>
    <script src="../js/mkeyplus.base.js"></script>
    <script src="../../../js/jquery-1.7.2.min.js"></script>
    <script src="../../../js/mui.picker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../../css/mui.picker.min.css" />
    <script src="../../../js/vue.js"></script>
    <script type="text/javascript">
      mui.init()
      if(window.plus) {
        plusready();
      } else {
        document.addEventListener('plusready', plusready, false);
      }
      let self
      function plusready() {
        self = plus.webview.currentWebview();
        vm.id = self.projectTaskId
        vm.status = self.status
      }
      let vm = new Vue({
        el: "#container",
        data: {
          id: null,
          status: 0,
          startTime: null,
          endTime: null
        },
        created: function() {

        },
        methods: {
          chooseTime(e) {
            var t = e.currentTarget;
            var optionsJson = t.getAttribute('data-options') || '{}';
            var options = JSON.parse(optionsJson);
            var id = t.getAttribute('id');
            if(t.picker) {
              t.picker.show(function(rs) {
                if(vm.startTime > vm.endTime) {
                  alert("开始时间不能大于结束时间")
                  return false
                }
                vm.startTime = rs.text
                //              t.picker.dispose();
                //              t.picker = null;
                
              });
            } else {
              t.picker = new mui.DtPicker(options);
              t.picker.show(function(rs) {
                if(vm.startTime > vm.endTime) {
                  alert("开始时间不能大于结束时间")
                  return false
                }
                vm.startTime = rs.text
                //              t.picker.dispose();
                //              t.picker = null;
                
              });
            }
            return false;
          },
          chooseTime1(e) {
            var t = e.currentTarget;
            var optionsJson = t.getAttribute('data-options') || '{}';
            var options = JSON.parse(optionsJson);
            var id = t.getAttribute('id');
            if(t.picker) {
              t.picker.show(function(rs) {
                if(vm.startTime > vm.endTime) {
                  alert("结束时间不能小于结束时间")
                  return false
                }
                vm.endTime = rs.text
                //              t.picker.dispose();
                //              t.picker = null;
                
              });
            } else {
              t.picker = new mui.DtPicker(options);
              t.picker.show(function(rs) {
                if(vm.startTime > vm.endTime) {
                  alert("结束时间不能小于结束时间")
                  return false
                }
                vm.endTime = rs.text
                //              t.picker.dispose();
                //              t.picker = null;
                
              });
            }
            return false;
          },
          submit() {
            if(!this.startTime){
              mui.toast("请选择开始时间")
              return false
            }
            if(!this.endTime){
              mui.toast("请选择结束时间")
              return false
            }
            let params = {
              id: this.id,
              starttime: new Date(this.startTime).getTime()/1000 ,
              endtime: new Date(this.endTime).getTime()/1000
            }
            plus.nativeUI.showWaiting('提交中')
            mui.baseApp.httpRequst('put', '/app/api/project/execution/utime', params, function() {
              mui.toast('操作成功')
              plus.nativeUI.closeWaiting()
              self.opener().close(0)
              setTimeout(function() {
                mui.back()
              }, 500)
              
            }, function() {
               plus.nativeUI.closeWaiting()
            })
          }
        },
      })
    </script>
  </body>

</html>